<template>
  <div class="pdf-layout">
    <header>
      <div class="left">
        <img src="~/assets/images/logo.png" alt="" class="logo" />
      </div>
      <div class="right">
        <span>NAME：储备LOGBOOK</span>
      </div>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <div>
        <span>Validated by</span>
        <div class="fill_name">张国荣</div>
      </div>
    </footer>
  </div>
</template>

<script setup></script>
<style scoped lang="less">
@import url("./less/vars.less");
.pdf-layout {
  padding: 50px 80px;
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: @gap-right;
    border-bottom: 2px solid @border-color;
    .left {
      img.logo {
        height: 50px;
        object-fit: cover;
      }
    }
    .right {
      letter-spacing: 2px;
      span {
        display: inline-block;
        margin-bottom: 5px;
      }
    }
  }
  footer {
    padding-top: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: @gap-right;
    & > div {
      display: flex;
    }
    .fill_name {
      width: 240px;
      .border-bottom();
      font-size: 18px;
      position: relative;
      top: -4px;
      text-align: center;
      flex: 1;
    }
  }
}
</style>
